<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商城管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品列表</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="add">
            <el-button type="primary" @click="show = true;dialogTitle='添加商品'">添加商品</el-button>
        </div>
        <el-card>
            <el-table
                :data="productList"
                stripe
                border
                style="width: 100%">
                <el-table-column
                    prop="name"
                    label="商品名">
                </el-table-column>
                <el-table-column
                    prop="type"
                    label="商品类别">
                    <template slot-scope="scope">
                        <div>
                            {{scope.row.type.desc}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="price"
                    label="商品价格（元）">
                </el-table-column>
                <el-table-column
                    prop="detail"
                    label="商品描述">
                </el-table-column>
                <el-table-column
                    label="操作">
                    <template slot-scope="scope">
                        <div>
                            <el-button type="primary" @click="changeCommodity(scope.row)">修改</el-button>
                            <el-button type="danger" @click="delCommodity(scope.row)">删除</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <el-dialog :title="dialogTitle" :visible.sync="show" @close="()=>{resetForm('productForm')}">
            <el-form :model="productForm" :rules="productFormRules" ref="productForm">
                <el-form-item label="商品名" prop="name">
                    <el-input v-model="productForm.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="商品类型" prop="typeId">
                    <el-select v-model="productForm.typeId" placeholder="请选择">
                        <el-option
                            v-for="item in typeList"
                            :key="item.id"
                            :label="item.desc"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商品价格" prop="price">
                    <el-input type="number" el-input v-model="productForm.price" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="商品描述" prop="detail">
                    <el-input el-input v-model="productForm.detail" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="()=>{resetForm('productForm');show = false;}">取 消</el-button>
                <el-button type="primary" @click="addCommodity" :loading='loading'>确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data(){
        return{
            typeList:[],
            loading:false,
            dialogTitle:'',
            show:false,
            productList:[],
            productForm: {
                name: "",
                typeId: "", 
                price: "", 
                detail: "" 
            },
            productFormRules: {
                name:[ { required: true, message: '请输入商品名', trigger: 'blur' } ],
                typeId:[ { required: true, message: '请输入商品类型', trigger: 'blur' } ],
                detail:[ { required: true, message: '请输入商品描述', trigger: 'blur' } ],
                price:[ { required: true, message: '请输入商品价格', trigger: 'blur' } ],
            },
        }
    },
    async created(){
        this.getComputed()
        this.getList()
    },
    computed:{
        
    },
    methods:{
        async getList(){
            const { data } = await this.$http.get('venue/goodsType')
            if (data.state !== 0) return this.$message.error(data.msg)
            this.typeList = data.result
        },
        async getComputed(){
            const { data } = await this.$http.get('venue/goods')
            if (data.state !== 0) {
            return this.$message.error(data.msg)
            }
            this.productList = data.result
        },
        addCommodity(){
            this.$refs['productForm'].validate(async (valid) => {
                if(!valid) return
                let model = this.dialogTitle == '添加商品' ? "post" : "put"
                this.loading = true
                const { data } = await this.$http[model]('venue/goods',this.productForm)
                this.loading = false
                this.show = false
                this.resetForm('productForm')
                this.getComputed()
                if (data.state !== 0) return this.$message.error(data.msg)
                return this.$message.success(this.dialogTitle == '添加商品' ? "添加成功" : "修改成功")
            })
        },
        changeCommodity(item){
            this.dialogTitle = "修改商品"
            this.show =true
            let obj = JSON.stringify(item)
            let itemInfo = JSON.parse(obj)
            itemInfo.typeId = item.type.id
            this.productForm = itemInfo
        },
        delCommodity(item){
            this.$confirm('是否删除该商品', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                console.log(item)
                const { data } = await this.$http.delete('venue/goods',{data:{id:item.id}})
                this.getComputed()
                if (data.state !== 0) return this.$message.error(data.msg)
                return this.$message.success("删除成功")
            })
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
      }
    }
}
</script>

<style scoped>
    .add{
        display: flex;
        justify-content: flex-end;
    }
    .add .el-button{
        margin-bottom: 10px;
    }
</style>